<template>
   <div class="box">
      <h2>父组件---->{{msg }}</h2>
      <Child message="我是你亲爸" :price="100" @make="getChildMsg"></Child>
   </div>
</template>
<!-- 
   父组件中引入子组件的步骤
   1、通过ES6的import方式导入组件: import Child from '@/Child.vue'
   2、在template标签中引入组件
      引入的方式有两种：<组件名></组件名>
   父组件向子组件通信的步骤
   1、在子组件中导入defineProps函数:import {defineProps} from 'vue'
   2、执行defindProps函数，然后规定父组件要传递到子组件的内容: defineProps(['message'])
   3、在父组件中，引入子组件标签的部分传递数据:<Child message="我是你亲爸" :price="100"></Child>
   子组件向父组件通信的步骤
   1、在子组件中导入defineEmits函数:defineEmits
   2、执行defineEmits函数来得到emit对象:  const emit=defineEmits<{(e:'make',value:string):void}>()
   3、执行emit方法：
   const send=()=>{
        //从子到父发送信息,参数1为自定义事件名称，参数2为所要传递的数据
        emit('make','白日依山尽，黄河入海流')
    }
    4、在父组件中的标签引入自定义事件来接收值
 -->
<script lang='ts' setup>
   import Child from '@/Child.vue'
   import {ref} from 'vue'
   let msg=ref<string>()
   const getChildMsg=(arg:string)=>{
      console.log('父组件:',arg);
      msg.value=arg
      
   }
</script>

<style lang='scss' scoped>
.box{
   width: 500px;
   height: 500px;
   background-color: orange;
}
</style>